v-model 是綁定在表單元件或自訂元件上，為實現雙向綁定用的。

ex: <input>、<textarea>、<select>

input與 textarea

於input裡面加入v-model就可於data內的資料綁定

DEMO

<input v-model="text"/>
<textarea v-model="textareaTatx"></textarea>

var vm = new Vue({
  el:'#app',
  data:{
    text:'',
    textareaTatx:'',
  },
})

checkbox 與radio

使用v-moddel 綁定 data的值，

DEMO

單個checkbox選擇true或false

<input type="checkbox" id="checkbox1" v-model="checkbox1"/>
<label for="checkbox1">要吃飯了嗎? {{checkbox1}}</label>

var vm = new Vue({
  el:'#app',
  data:{
    checkbox1: false,
  },
})

radio單選

<div>
    <input type="radio" id="radio1" v-model="radiofood" value="珍珠奶茶"/>
    <label for="radio1">珍珠奶茶</label>
  </div>
  <div>
    <input type="radio" id="radio2" v-model="radiofood" value="甜不辣"/>
    <label for="radio2">甜不辣</label>
  </div>
  <div>
    <input type="radio" id="radio3" v-model="radiofood" value="雞排"/>
    <label for="radio3">雞排</label>
  </div>
  <p>我想吃 {{radiofood}}    </p>

var vm = new Vue({
  el:'#app',
  data:{
    radiofood:'',
  },
})

使用陣列方式加入checkbox

DEMO

可利用checkbox 的 value ,並把value加入製陣列裡面

<div>
    <input type="checkbox" id="food1" v-model="foods" value="珍珠奶茶"/>
    <label for="food1">珍珠奶茶</label>
  </div>
  <div>
    <input type="checkbox" id="food2" v-model="foods" value="甜不辣"/>
    <label for="food2">甜不辣</label>
  </div>
  <div>
    <input type="checkbox" id="food3" v-model="foods" value="雞排"/>
    <label for="food3">雞排</label>
  </div>
  <div class="foodspanBox">我想吃 <span class="foodspan" v-for="item in foods">{{item}}</span></div>

var vm = new Vue({
  el:'#app',
  data:{
    foods: [],
  },
})

select

DEMO

<select class="form-control" v-model="selected">
    <option value="" disabled="disabled">請選擇</option>
    <option value="雞排">雞排</option>
    <option value="甜不辣">甜不辣</option>
    <option value="薯條">薯條</option>
  </select>
  <p>我喜歡吃的食物是 <span>{{selected}}</span></p>

var vm = new Vue({
  el:'#app',
  data:{
    selected:'',
  },
})

一天又平安的過去了